<template>
  <div class="ec-app-container">
    <!-- 查询条件 -->
    <div class="filter-container">
      <el-form label-width="90px">
        <el-row :gutter="10">
          <el-col :span="6">
            <el-form-item label="模块名称：" >
              <el-input
                v-model="listQuery.name"
                placeholder="模块名称"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="状态：" >
              <el-select
                v-model="listQuery.status"
                placeholder="状态"
                clearable>
                <el-option
                  v-for="(item, index) in GLOBAL.status"
                  :key="index"
                  :label= "item"
                  :value="index+1"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col
            :span="6"
            class="text-center">
            <el-button
              type="primary"
              class="border-4C7FD7 color-4C7FD7"
              icon="el-icon-search"
              @click="searchList">查询</el-button>
            <el-button
              class="border-4C7FD7 color-4C7FD7"
              @click="resetSearch">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- table -->
    <div>
      <div class="mt-30">
        <!--<el-button class="filter-item" type="primary" @click="showDialog">新增</el-button>-->
      </div>
      <div class="mt-20">
        <el-table
          v-loading="listLoading"
          :data="list"
          border
          fit
          highlight-current-row
          style="width: 100%;"
          @selection-change="handleSelectionChange">
          <el-table-column
            label="操作"
            align="center"
            width="230">
            <template slot-scope="scope">
              <el-button
                v-if="scope.row.object.status == 1"
                type="text"
                size="mini"
                @click="releaseStatus(scope.row, 0, '启用模块')">启用</el-button>
              <el-button
                v-else
                type="text"
                size="mini"
                @click="releaseStatus(scope.row, 1, '停用模块')">停用</el-button>
              <el-button
                v-if="scope.row.object.status == 0"
                type="text"
                size="mini"
                @click="toPath('homesetting/' + scope.row.id)">设置</el-button>
              <el-button
                v-if="scope.row.object.status === 0"
                type="text"
                size="mini"
                @click="handleUpdate(scope.row)">查看</el-button>
              <el-button
                v-if="scope.row.object.status == 1"
                type="text"
                size="mini"
                @click="deleteDate(scope.row.id, '删除模块')">删除</el-button>
            </template>
          </el-table-column>
          <el-table-column
            label="模块名称"
            align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.object.name }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="状态"
            align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.object.status == 1 ? '停用' : '启用' }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="应用终端"
            align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.object.applicationTerminal }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="修改时间"
            align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.updateTime }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="修改用户"
            align="center">
            <template slot-scope="scope">
              <span>暂时没做</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="listQuery.pageNum"
        :limit.sync="listQuery.pageSize"
        @pagination="searchList" />
    </div>
    <!-- 新增修改 -->
    <el-dialog
      :visible.sync="dialogFormVisible"
      title="新增模块"
      width="450px">
      <el-form
        ref="objectForm"
        :model="object"
        :rules="objectRules"
        label-width="110px">
        <el-row>
          <el-form-item
            label="模块名称："
            prop="name">
            <el-input v-model="object.name"/>
          </el-form-item>
          <el-form-item
            label="应用终端："
            prop="roleName">
            <el-select
              v-model="object.applicationTerminal"
              placeholder="所属范围"
              clearable>
              <el-option
                v-for="(item, index) in GLOBAL.scopeTypes"
                :key = "index"
                :label= "item"
                :value="item"/>
            </el-select>
          </el-form-item>
        </el-row>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer">
        <el-button
          :loading="btnLoading"
          type="primary"
          @click="onSubmit('新增模块')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination、
import mixin from './rules/home'
export default {
  name: 'Project',
  components: {
    Pagination
  },
  mixins: [mixin],
  data() {
    return {
      listQuery: {
        level1: 'fy_homepageModule',
        name: '',
        status: '',
        pageSize: 10,
        pageNum: 1
      },
      object: {
        'name': '',
        'applicationTerminal': '',
        'status': 1,
        'level2': '',
        'level1': '',
        'level': 'fy_homepageModule'
      }
    }
  },
  created() {
    // 初始化
    this.searchList()
  },
  methods: {}
}
</script>

<style scoped>

</style>
